<template>
  <div class="relative">
    <button
      @click="isOpen = !isOpen"
      class="z-10 relative block h-8 w-8 rounded-full overflow-hidden border-gray-200  border-2  focus:outline-none focus:border-white"
    >
      <img
        class="h-full w-full object-cover"
        src="https://source.unsplash.com/random"
        alt=""
      />
    </button>
    <button
      v-if="isOpen"
      tabindex="-1"
      @click="isOpen = false"
      class="fixed inset-0 w-full h-full bg-black opacity-50 cursor-default"
    ></button>
    <div
      v-if="isOpen"
      class="absolute right-0 bg-white rounded-lg py-2 w-48 mt-2 shadow-xl"
    >
      <a
        href="#"
        class="block px-4 py-2 text-gray-800 hover:bg-indigo-500 hover:text-white"
        >Account settings</a
      >
      <a
        href="#"
        class="block px-4 py-2 text-gray-800 hover:bg-indigo-500 hover:text-white"
        >Support</a
      >
      <a
        href="#"
        class="block px-4 py-2 text-gray-800 hover:bg-indigo-500 hover:text-white"
        >Sign out</a
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false,
    };
  },

  created() {
    const handleEscape = (e) => {
      console.log(this);
      console.log(e);
      if (e.key === "Esc" || e.key === "Escape") {
        this.isOpen = false;
      }
    };
    document.addEventListener("keydown", handleEscape);

    this.$once("hook:beforeDestroy", () => {
      document.removeEventListener("keydown", handleEscape);
    });
  },
};
</script>

<style></style>
